import { Button, Tabs } from 'antd'
import { CloseOutlined } from '@ant-design/icons';
import { lazy, Suspense, useEffect, useState } from 'react'

import { consoleStyle } from '../../Config/theme'
import { PutIndexedDB } from '../../Utils/IndexedDB'
import { ICONMapping } from '../../Config/IconMapping'
import { treeValue, ColorCallBack } from '../../Utils'
import { themeStore, pageStore } from '../../Config/zustand'
const BodyTemplate = () => {
    const { pageActive, pageList, updateActive, updateList } = pageStore()
    const [items, setItems] = useState([])
    const { body } = themeStore()

    const { bodyColor, bodyPx, bodyRadius, bodyMargin, bodyPadding, boxShadow } = body
    const { tabsIsAll, tabsRadio, tabsBack, tabsActive, tabsBorderColor, tabsBorderType } = body
    const { iconState, iconSize, iconIndex, fontColor, fontFamily, fontWeight, fontStyle, fontSize } = body

    const BodyStyle = {
        background: ColorCallBack(bodyColor),
        backdropFilter: `blur(${bodyPx}px`,
        borderRadius: bodyRadius,
        margin: bodyMargin,
        padding: bodyPadding,
        width: `calc(100% - ${bodyMargin * 2}px )`,
        boxShadow: `var(${boxShadow})`,
        '--tabsRadio': tabsRadio + 'px',
        '--tabsBack': tabsBack,
        '--tabsActive': tabsActive,
        '--tabsBorderColor': tabsBorderColor,
        '--tabsBorderType': tabsBorderType,
        '--fontColor': fontColor,
        '--fontFamily': fontFamily,
        '--fontWeight': fontWeight,
        '--fontStyle': fontStyle,
        '--fontSize': fontSize + 'px',
        '--iconState': iconState ? 'inline' : 'none',
        '--iconSize': iconSize + 'px',
        '--iconIndex': iconIndex + 'px',
    }

    const onChange = async (e) => {
        // 记录当前active 
        await PutIndexedDB('openKey', e)
        updateActive(e)
        const { label, url } = treeValue(pageList, e, 'key')
        console.info(`%c[ 切换 ${label} -- ${url} ]`, consoleStyle)
    }

    const onModifyData = async (data) => {
        await PutIndexedDB('pageList', data)
    }

    const onEdit = (e) => {
        const data = pageList.filter(v => v.key !== e)
        if (pageActive === e) onChange(data.at(-1).key)
        updateList(data)
        onModifyData(data)
    }

    useEffect(() => {
        if (pageList.length > 0) {
            onModifyData(pageList)
            const arr = structuredClone(pageList)
            const data = arr.map(item => {
                const { icon, type, url, key } = item
                if (icon) item.icon = ICONMapping[icon]
                const Template = type === 'diy' ? lazy(() => import(`../../Page/Admin/${url}.jsx`)) :
                    type === 'dev' ? lazy(() => import('../../Page/Admin/DevExtremePage.jsx')) :
                        type === 'lay' ? lazy(() => import('../../Page/Admin/LayoutPage.jsx')) :
                            undefined
                if (Template) item.children = <Template url={url} uuid={key} />
                return item
            })
            setItems(data)
        }
    }, [pageList])

    const onClearAll = () => {
        updateActive(pageList[0].key)
        updateList([pageList[0]])
    }

    return (
        <div className='BodyTemplate' style={BodyStyle}>
            <Suspense>
                <Tabs
                    hideAdd
                    items={items}
                    activeKey={pageActive}
                    type="editable-card"
                    onChange={onChange}
                    onEdit={onEdit}
                    tabBarExtraContent={tabsIsAll && <Button ghost danger icon={<CloseOutlined />} onClick={onClearAll} />}
                />
            </Suspense>
        </div>
    );
};

export default BodyTemplate;